<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui"></script>
    <link href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css" rel="stylesheet"/>

</head>
<style>
    #app1{
        width: 100%;
        height: 100px;
        background-color: aquamarine;
    }
    #app2{
        width: 20%;
        height: 800px;
        float: right;
        background-color:mediumaquamarine;
        border: 1px;
    }
    #app3{
        width: 80%;
        height: 800px;
        float: left;
        border: 1px;
    }
    .btn{
        background-color: mediumaquamarine;
        height: 80px;
        width: 100%;
    }

</style>
<body>
<div id="app">
    <div id="app1">
        <h1>
            <span>{{user.realname}}</span>
            <span style="float: right" @click="logout(user)">退出</span>
            <span style="float: right" @click="change()">修改<i class="el-icon-edit"></i>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </h1>
    </div>
    <div id="app2">
        <button class="btn" @click="pagebooks">书籍查看</button>
        <button class="btn" @click="pageborrow">借书情况</button>
        <el-input v-model="input" placeholder="输入搜索内容后点按钮确定"></el-input>
    </div>
    <div id="app3">
        <el-form :label-position="left" label-width="80px" :model="formLabelAlign" v-show="chang">
            <el-form-item label="名称">
                <el-input v-model="formLabelAlign.realname" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formLabelAlign.passwd"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="formLabelAlign.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Submit()">立即修改</el-button>
                <el-button @click="noSub()">取消</el-button>
            </el-form-item>
        </el-form>
        <template>
            <!-- 书籍查看表 -->
            <el-table
                    :data="books"
                    style="width: 100%"
                    v-show="JSON.stringify(books)!='[]'">
                <el-table-column
                        label="书籍id"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.bookid }}</span>
                        <!-- scope.row该行数据 可任取名-->
                    </template>a
                </el-table-column>
                <el-table-column
                        label="书籍名称"
                        width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-notebook-2"></i>
                        <span style="margin-left: 10px">{{ scope.row.bookname }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                        label="剩余数量"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.haiyou }}</span>
                    </template>a
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="success"
                                @click="borrowbook(scope.row)">借1本书</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 借书表 -->
            <el-table
                    :data="borrow"
                    style="width: 100%"
                    v-show="JSON.stringify(borrow)!='[]'">
                <el-table-column
                        label="书名"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.bookname }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="数量"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.borrownumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="success"
                                @click="huanbook(scope.row,1)">还1本</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="success"
                                @click="huanbook(scope.row,scope.row.borrownumber)">全还</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <el-button-group style="float: right;" v-show="JSON.stringify(books)!='[]'" >
            <el-button type="primary" icon="el-icon-arrow-left" @click="sumbookpage()">上一页</el-button>
            <el-button type="primary" @click="addbookpage()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
        <el-button-group style="float: right;" v-show="JSON.stringify(borrow)!='[]'" >
            <el-button type="primary" icon="el-icon-arrow-left" @click="sumborrowpage()">上一页</el-button>
            <el-button type="primary" @click="addborrowpage()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
            page:1,
            input: '',
            books:[],//数组形式
            borrow:[],
            formLabelAlign: {
                userid:'',
                realname:'',
                passwd:'',
                age:''
            },
            chang:false
        },
        mounted:function (){
            const use =localStorage.getItem('user')
            // alert(use)
            if (use) {
                this.user = JSON.parse(use)
            }//接受login数据
            this.getbookpage();
        },
        methods:{
            borrowbook(row) {
                if(row.haiyou == 0){
                    alert("没有了")
                    return;
                }
                const _this=this;
                axios({
                        url:"/borrow/borrow",
                        method:"get",
                        params:{
                            id:row.bookid
                        }
                    }
                ).then(function (res){
                        alert(res.data.data)
                        location.reload();
                    }
                )
            },
            huanbook(row,num){
                const _this=this;
                axios({
                        url:"/borrow/huanshu",
                        method:"get",
                        params:{
                            borrowid:row.borrowid,
                            num:num
                        }
                    }
                ).then(function (res){
                        alert(res.data.data)
                        location.reload();
                    }
                )
            },
            sumbookpage(){
                if(this.page==1)return;
                this.page--;
                    this.getbookpage();
            },
            addbookpage(){
                if(this.books.length<10)return;
                this.page++;
                    this.getbookpage();
            },
            sumborrowpage(){
                if(this.page==1)return;
                this.page--;
                this.getborrowpage();
            },
            addborrowpage(){
                if(this.borrow.length<10)return;
                this.page++;
                this.getborrowpage();
            },
            pagebooks(){
                this.borrow=[];
                this.page=1
                this.getbookpage()
            },
            pageborrow(){
                this.books=[];
                this.page=1
                this.getborrowpage()
            },
            logout(user){
                const data=user
                localStorage.removeItem('user')
                axios({
                        url:"/user/logout",
                        method:"post",
                        data:data
                    }
                ).then(function (res){
                    }
                )
                location.reload()
            },
            getbookpage(){
                const _this=this;
                axios({
                        url:"/book/page",
                        method:"get",
                        params:{
                            page:this.page,
                            name:this.input
                        }
                    }
                ).then(function (res){
                    // alert(res.data.data)
                        _this.books=res.data.data;
                    }
                )
            },
            getborrowpage(){
                const _this=this;
                axios({
                        url:"/borrow/page",
                        method:"get",
                        params:{
                            page:this.page,
                            name:this.input
                        }
                    }
                ).then(function (res){
                        _this.borrow=res.data.data;
                    }
                )
            },
            Submit(){
                const _this=this;
                axios({
                        url:"/user/change",
                        method:"get",
                        params:_this.formLabelAlign
                    }
                ).then(function (res){
                    // alert("!")
                    // alert(res.data.data)
                    localStorage.removeItem('user')
                    localStorage.setItem('user',JSON.stringify(res.data.data))//保存信息
                    location.reload();
                    }
                )

            },
            noSub(){
                this.chang=false;
                location.reload();
            },
            change(){
                this.chang=true;
                this.borrow=[];
                this.books=[];
                this.formLabelAlign.userid=this.user.userid;
                this.formLabelAlign.realname=this.user.realname;
                this.formLabelAlign.passwd=this.user.passwd;
                this.formLabelAlign.age=this.user.age;
            }
        }
    })
</script>
</html>